<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!--   之前做图像上传 展示
1. 选择图片携带上传的图片发送请求到服务器
2. 服务器接收了图片之后, 将图片存储到数据库中
3. 返回给前端一个url地址
4. 前端拿着url地址展示 -->
<!-- 面试? 如何使用纯前端代码实现一个上传图片预览的效果??? -->
  <input type="file"><br>
  <img src="" alt="" style="width:200px; height:200px">
<script>
  const ipt = document.querySelector('input')
  const img = document.querySelector('img')
  /* // 1. 为file绑定change事件
  ipt.addEventListener('change', (e) => {
    // console.log(e.target.files[0])//上传的文件对象
    // 2.获取上传的文件对象
    // 需要将上传的文件对象生成一个url地址 供img标签展示
    // 3. URL.createObjectURL生成一个图片的临时地址, 生成地址的页面关闭后,url地址也随之失效
   const url = URL.createObjectURL(e.target.files[0])
   console.log(url)
  //  4. 将地址交给img的src
   img.src = url
   // 5.解决上传同一张图片不触发change事件的bug
   e.target.value = null
  }) */

  // -----------是fileReader文件读取-----------------------------
  // 1. 为file绑定change事件
  ipt.addEventListener('change', (e) => {
    // console.log(e.target.files[0])//上传的文件对象
    // 2. 创建文件读取对象
    const reader = new FileReader()
    // 3. 使用reader.readAsDataURL(读取文件对象)
    reader.readAsDataURL(e.target.files[0])
    // 4. 在读取成功后,绑定 load事件
    reader.onload = () => {
      console.log(reader.result) // base64字符串 url地址
      // 5.将读取的base64格式的url交给img的src属性
      img.src = reader.result
    }
   // 6.解决上传同一张图片不触发change事件的bug
   e.target.value = null
  })


  // URL.createObjectURL 和 fileReader 都可以生成上传图片的url地址, 都可实现图片的本地预览
  // 区别: URL.createObjectURL 是一个临时地址, 生成这个地址的页面关闭,临时地址会失效
  //      fileReader生成的是base64格式的字符串地址, 这个地址是永久生效的(base64格式会将增加30%左右的空间)
</script>
</body>
</html>